ＨＴＭＬ簡単講座３時間目

※以下のタグのカッコ＜＞は、タグ変化しないよう全部全角になってます。
半角で表示されるようにする方法もあるんですけど、かなり面倒でこたっぺ☆の脳みそでは混乱するんで（笑）

お手数お掛けしてすいませんが、使うとき、全部半角に変えてくださいね。

さぁ、やっと３時間目です。

今度は簡単なテーブルをいれてみましょう。
といっても、ご飯を食べたり、テーブルクロスをかける
アレじゃありません(-_-;)／(+_+;)＼(-_-;)バシバシッ！！

表のことを「テーブル」といいます。
このテーブル、とっても便利なんですね～。

まず、基本的なものから。
テーブルを表示するには＜TABLE＞＜/TABLE＞のタグをつかいます。
枠線は、「border=""」を一緒に使って調節します。
「""」の値が大きいほど、枠線が太くなります。
しか～し、これだけでは機能しません。
TABLEタグの間に＜TR＞と＜TD＞のタグをいれます。
「TR」というのは、１段をあらわします。（ヨコ）
「TD」は、１つの列を表します。（タテ）

とりあえずやってみましょ～。
基本はコレ↓
＜TABLE border="1"＞＜TR＞＜TD＞テーブル＜/TD＞＜/TR＞＜/TABLE＞⇒

テーブル

これの「border=""」の数字をあげていくと

＜TABLE border="1"＞＜TR＞＜TD＞テーブル＜/TD＞＜/TR＞＜/TABLE＞⇒

テーブル

＜TABLE border="2"＞＜TR＞＜TD＞テーブル＜/TD＞＜/TR＞＜/TABLE＞⇒

テーブル

＜TABLE border="3"＞＜TR＞＜TD＞テーブル＜/TD＞＜/TR＞＜/TABLE＞⇒

テーブル3

＜TABLE border="4"＞＜TR＞＜TD＞テーブル＜/TD＞＜/TR＞＜/TABLE＞⇒

テーブル4

＜TABLE border="5"＞＜TR＞＜TD＞テーブル＜/TD＞＜/TR＞＜/TABLE＞⇒

テーブル5

＜TABLE border="6"＞＜TR＞＜TD＞テーブル＜/TD＞＜/TR＞＜/TABLE＞⇒

テーブル6

＜TABLE border="7"＞＜TR＞＜TD＞テーブル＜/TD＞＜/TR＞＜/TABLE＞⇒

テーブル7

＜TABLE border="8"＞＜TR＞＜TD＞テーブル＜/TD＞＜/TR＞＜/TABLE＞⇒

テーブル8

＜TABLE border="9"＞＜TR＞＜TD＞テーブル＜/TD＞＜/TR＞＜/TABLE＞⇒

テーブル9

＜TABLE border="10"＞＜TR＞＜TD＞テーブル＜/TD＞＜/TR＞＜/TABLE＞⇒

テーブル10

このとおり～。

テーブルを真ん中にもってきましょ～。
＜CENTER＞＜TABLE border="1"＞＜TR＞＜TD＞テーブル＜/TD＞＜/TR＞＜/TABLE＞＜/CENTER＞⇒

テーブル

では、右に寄せてみましょう。寄せるには、「align=""」というタグを使います。
＜TABLE border="1" align="right"＞＜TR＞＜TD＞テーブル＜/TD＞＜/TR＞＜/TABLE＞＜/CENTER＞⇒

テーブル1

この「align」は、上下左右の位置を設定するタグです。
Align="right"なら、右寄せ
Align="left"なら、左寄せ
Align="center"なら中央揃え

今度は複数の枠を作ってみます。
表なんかを作るのに便利ですよね。
上にも書いたように、「TR」というのは、横段を、「TD」は、縦列を表します。
縦に３段、横に１列の枠のある表を作りたいときは、「TR」タグを３回使います。
＜TABLE border="1"＞
＜TR＞＜TD＞うふっ♪＜/TD＞＜/TR＞
＜TR＞＜TD＞えへっ♪＜/TD＞＜/TR＞
＜TR＞＜TD＞おほっ♪＜/TD＞＜/TR＞
＜/TABLE＞
　　　　　　　↓

うふっ♪

えへっ♪

おほっ♪

と見事３段の表になりました。

お分かりでしょうか？？？

今度は、横３列、縦１段の表ならどうでしょう。そう、「TD」を３回使うんですね～。ただ、この「TD」は、必ず「TR」で挟んで使います。

＜TABLE border="1"＞
＜TR＞＜TD＞あら♪＜/TD＞＜TD＞私ったら♪＜/TD＞＜TD＞イヤン♪＜/TD＞＜/TR＞
＜/TABLE＞
　　　　　　　↓

あら♪

私ったら♪

イヤン♪

となるわけです、ハイ。つまり、＜TR＞＜/TR＞（１段タグ）の間に、作りたい列の数だけ＜TD＞＜/TD＞をいれればいいんですね。

ではでは、これを合わせて縦３段、横３列の表を作ってみましょう。

＜TABLE border="1"＞
＜TR＞＜TD＞１＜/TD＞＜TD＞２＜/TD＞＜TD＞３＜/TD＞＜/TR＞
＜TR＞＜TD＞４＜/TD＞＜TD＞５＜/TD＞＜TD＞６＜/TD＞＜/TR＞
＜TR＞＜TD＞７＜/TD＞＜TD＞８＜/TD＞＜TD＞９＜/TD＞＜/TR＞
＜/TABLE＞
　　　　　　↓

１	２	３
４	５	６
７	８	９

これでリンクの表なんかも作ることが出来ます。

＜TABLE border="3"＞
＜TR＞＜TD＞リンク先Ａ＜/TD＞＜TD＞リンクＡだよ～＜/TD＞＜/TR＞
＜TR＞＜TD＞リンク先Ｂ＜/TD＞＜TD＞リンクＢだよ～＜/TD＞＜TR＞
＜TR＞＜TD＞リンク先Ｃ＜/TD＞＜TD＞リンクＣだよ～＜/TD＞＜/TR＞
＜/TABLE＞
　　　　　　↓

リンク先Ａ	リンクＡだよ～
リンク先Ｂ	リンクＢだよ～
リンク先Ｃ	リンクＣだよ～

各ブロックに、バナーなんかを貼りつければ、立派なリンク集です。

では、このテーブルに色をつけたいときはどうでしょう。

そんなときは、「BGCOLOR=」を使います、こんな風に。＜TABLE BGCOLOR=#ffff00 border="1"＞＜TR＞＜TD＞イエロー＜/TD＞＜/TR＞＜/TABLE＞⇒
　

イエロー

「BGCOLOR」は、「Back Ground Color」のコト。

んじゃぁ、枠線に色をつけるときは？

そんなときは、「bordercolor=""」を使います。
わかりやすいように、線を太くしてみます。
＜TABLE border="4" bordercolor="#ffff00"＞＜TR＞＜TD＞イエロー＜/TD＞＜/TR＞＜/TABLE＞⇒
　

イエロー

上のリンクの表に色をつけてみましょう。

＜TABLE border="3" bordercolor="#00ffcc"＞
＜TR＞＜TD＞リンク先Ａ＜/TD＞＜TD＞リンクＡだよ～＜/TD＞＜/TR＞
＜TR＞＜TD＞リンク先Ｂ＜/TD＞＜TD＞リンクＢだよ～＜/TD＞＜TR＞
＜TR＞＜TD＞リンク先Ｃ＜/TD＞＜TD＞リンクＣだよ～＜/TD＞＜/TR＞
＜/TABLE＞
　　　　　　↓